<template>
  <div>
    <el-card shadow="never">
      <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" />
      <ZwTable ref="tableRef" class="table-box" :option="tableOption" :fetch-params="state.searchParams" :fetch-api="fetch()"> </ZwTable>
      <FailDetail :isopen="isopen" :title="title" :rowid="rowid" @close="isopen = false"></FailDetail> </el-card
  ></div>
</template>
<script setup lang="tsx">
  import { ref, reactive, computed } from 'vue'
  import ZwTable from '@/components/zw/table/Table'
  import ZwSearchForm from '@/components/zw/search-form/SearchForm'
  import { exportDetail } from '@/api/customer/clubManage/commonSea'
  import { deepCopy } from '@/utils/helper'
  import FailDetail from '../components/FailDetail.vue'
  import router from '@/router'
  import { titleSearch } from '@/api/channel/operation'
  const isopen = ref(false)
  const rowid = ref('')
  const title = ref('')
  const tableRef = ref<HTMLElement | null>(null)
  const defaultParams = {}
  const state = reactive({
    searchParams: deepCopy(defaultParams)
  })
  const tableOption = [
    {
      prop: 'name',
      label: 'Excel名称'
    },
    {
      prop: 'work_user_name',
      label: '导入员工'
    },
    {
      label: '上传时间',
      prop: 'created_at'
    },
    {
      prop: 'import_success_num',
      label: '导入成功/导入失败',
      render({ row }) {
        return row.import_success_num + '/' + row.import_fail_num
      }
    },

    {
      prop: 'operate',
      label: '操作',
      width: 100,
      fixed: 'right',
      isOperate: true,
      renderOperate({ row }) {
        return (
          <>
            <ElButton
              size="small"
              v-show={row.import_fail_num>0}
              onClick={() => {
                rowid.value = row.id
                isopen.value = true
                title.value = `失败详情【${row.name}】`
              }}
            >
              失败详情
            </ElButton>
          </>
        )
      }
    }
  ]
  const searchOption = computed(() => {
    return [
      {
        label: 'Excel',
        name: 'name',
        value: '',
        type: 'input',
        placeholder: '请输入Excel名称进行搜索'
      },
      {
        label: '导入员工',
        name: 'work_user_ids',
        value: [],
        type: 'select',
        placeholder: '选择员工',
        multiple: true,
        popperClass: 'zw-hide_select_option',
        isUserSelect: true,
        formatOption: (v) => ({
          label: v.name,
          value: v.id
        })
      },
      {
        label: '上传时间',
        name: 'import_time',
        value: [],
        type: 'datePicker',
        datePickerType: 'daterange',
        valueFormat: 'YYYY-MM-DD',
        startPlaceholder: '开始日期',
        endPlaceholder: '结束日期'
      }
    ]
  })

  const fetch = () => {
    // 获取文件列表
    return exportDetail
  }
  //查询
  const search = (v) => {
    state.searchParams = v
  }
  //清空
  const reset = (v) => {
    state.searchParams = deepCopy(defaultParams)
  }
</script>
<style scoped lang="scss"></style>
